---
title: Guidelines
redirect_from:
  - /components/skeleton/
---

<ReactExample exampleId="Skeleton-default" />

## When to use

- When you need to display placeholder preview of your content before the data is loaded
- When component has large content
- To keep users from giving up on an experience.

## Component status

<ComponentStatus component="Skeleton" />

## Behavior

### Default

By default **Skeleton** component have single row.
You can change number of rows, their height and offset between them. It's useful if you need to make it equal to expected height of the upcoming data.

## Rows

You can create **Skeleton** with certain number of `rect` rows. Rows are adjustable with `rowHeight` and `rowOffset` properties.

<ReactExample exampleId="Skeleton-rows" />

### Presets

**Skeleton** component have presets, it's useful, when you need to build the layout with different components like `Button`, `Text`, `Image`, `Card` and etc.

<ReactExample exampleId="Skeleton-presets" />
